<template>
  <div class="app-container home">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="生产时间">
        <el-date-picker
          v-model="daterangeWorkTime"
          size="small"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
    </el-form>
    <el-button type="primary" icon="el-icon-search" size="mini">搜索</el-button>

    <!-- 图表插件测试 -->
    <ve-line :data="chartData" :extend="hExtend"></ve-line>
    <ve-histogram :data="chartData" :extend="hExtend"></ve-histogram>
    <br />
    <ve-pie :extend="pieExtend"></ve-pie>
  </div>
</template>

<script>
import { getModelEcharts } from "@/api/echarts/echarts";
import * as charts from "@/common/echartsEnum";
export default {
  name: "chart",
  data() {
    return {
      // 版本号
      queryParams: null,
      daterangeWorkTime: null,
      version: "3.3.0",
      query: null,
      charts: charts,
      chartData: {
        columns: ["产品型号", "浇筑数", "合格数", "报废量"],
        // columns: [this.charts.echarts["fpy"],this.charts.echarts["model"] ,this.charts.echarts["num"] ,this.charts.echarts["successNum"] ,this.charts.echarts["wasteNum"]],
        rows: [],
      },
      hExtend: {
        series: {
          label: {
            position: "top",
            show: true,
          },
        },
        // tooltip: {
        //   formatter: params=> {
        //     params.forEach(param=>{
        //       param.seriesName = this.charts.echarts[param.seriesName];
        //     })
        //     return "中国";
        //   },
        // },
      },
      pieExtend: {
        series: {
          name: "面积模式",
          type: "pie",
          radius: [30, 150],
          center: ["50%", "50%"],
          roseType: "area",
          itemStyle: {
            borderRadius: 8,
          },
        },
      },
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      getModelEcharts({ statisticalByModelDTO: this.query }).then((res) => {
        this.chartData.rows = res.data;
        let pieArray = [];

        this.chartData.rows.forEach((row) => {
          row.产品型号 = row.model;
          row.合格率 = row.fpy;
          row.浇筑数 = row.num;
          row.合格数 = row.successNum;
          row.报废量 = row.wasteNum;
          pieArray.push({ value: row.fpy, name: row.model });
        });

        this.pieExtend.data = pieArray;
        console.log(this.pieExtend.data);
      });
    },
  },
};
</script>

<style scoped lang="scss">
</style>

